
import { designComponent } from '../../../../src/use/designComponent';
import { useModel } from '../../../../src/use/useModel';

export const DemoUseModelComponent = designComponent({
  name: 'demo-use-model-component',
  props: {
    modelValue: { type: String },
    range: { type: Boolean },
    start: { type: String },
    end: { type: String },
  },
  emits: {
    updateModelValue: (val: string | number | undefined) => true,
    updateStart: (val: string | number | undefined) => true,
    updateEnd: (val: string | number | undefined) => true,
  },
  setup({ props, event: {emit} }) {
    console.log("demoUseModel", props);
    
    const model = useModel(() => props.modelValue, emit.updateModelValue)
    const start = useModel(() => props.start, emit.updateStart)
    const end = useModel(() => props.end, emit.updateEnd)
    return {
      render: () => (
        <div>
          {
            props.range ? <>
              <input type="text" v-model={start.value} />~
              <input type="text" v-model={end.value} />
            </>:<input type="text" v-model={model.value} />
          }
        </div>
      )
    }
  }
})